<template>
    <view class="page" :style="{backgroundImage:'url(' + $imgUrls(configInfo.bj_img) + ')', backgroundColor: configInfo.backColor}">
        <!-- <status-bar title=' ' :goHome='fromShare' hideBg statusHeight></status-bar> -->
        <view class="back bgwhite flexac" :style="{top: menuButtonTop+'px'}">
            <text class="iconfont icon-shouyeT211 black bold" v-if="fromShare == 1" @click="backHome()"></text>
            <text class="iconfont icon-xiangzuo black" v-else @click="back()"></text>
        </view>
        <image :src="$imgUrls(configInfo.img)" mode="widthFix"></image>
        <view>
            <view class="couItem d-flex" v-for="(item,index) in configInfo.couponList" :key="index"
                :style="{backgroundImage:'url(' + baseUrl + '/Uploads/diy/img/couItemBg.png' + ')'}">
                <view class="left flexac f-column">
                    <view>
                        <text class="h6 m-right4">{{ item.unit }}</text>
                        <text class="size60 bold">{{ item.price }}</text>
                        <text class="h6 m-left4">{{ item.priElse }}</text>
                    </view>
                    <view class="h6 p-left30 p-right30 text-center">{{ item.info }}</view>
                </view>
                <view class="flex-1 padding30-20">
                    <view class="d-flex a-center m-bot20">
                        <view class="flex-1 size34 color_44 bold t-letter2 ellipsis">{{ item.title }}</view>
                        <view class="type flexac bgwhite size22 bold500">{{ item.couponType }}</view>
                    </view>
                    <view class="h7 color_66 ellipsis_2 m-bot10">{{ item.remark }}</view>
                    <view class="h7 color_66">{{ item.expiryDate }}</view>
                </view>
            </view>
        </view>
        <view class="btn flexac size36 bold" @click="claimCoupons">{{ buttonText }}</view>
        <view class="p-left40 p-right40 white" v-if="configInfo.content">
            <view class="size28 bold m-bot30">活动规则</view>
            <rich-text :nodes="configInfo.content"></rich-text>
        </view>

        <showModel @cancelFunc='showModal=false' @loginSucceed="getConfigInfo()" goHome='0' v-if='showModal' type='2'></showModel>
    </view>
</template>

<script>
import { mapState } from 'vuex'
export default {
    data(){
        return {
            baseUrl: this.baseUrl,
            id: '',
            configInfo: '',
            buttonKey: '',
            buttonText: '',
            showModal: false,
            fromShare: 0,
            menuButtonTop: getApp().globalData.menuButtonObject.top // 胶囊按钮的top值
        }
    },
    computed: {
        ...mapState(['vid'])
    },
    onLoad(e){
        if(e.tid) this.id = e.tid
        if(e.fromShare) this.fromShare= e.fromShare
        this.getConfigInfo()
    },
    methods: {
        getConfigInfo(){
            this.$http.post({
                url: '/singleSaleApi/claimActivityCoupons',
                data: {
                    id: this.id
                }
            }).then(res=>{
                if(res.code != 100) return this.$Toast(res.msg)
                this.configInfo = res.date
                this.buttonKey = res.buttonKey || ''
                this.buttonText = res.buttonText
            })
        },
        claimCoupons(){
            if(!this.vid) return this.showModal = true
            if(!this.buttonKey) return
            this.$http.post({
                url: '/singleSaleApi/claimCouponsOperation',
                data: {
                    buttonKey: this.buttonKey
                }
            }).then(res=>{
                this.$Toast(res.msg)
                if(res.code != 100) return
                this.getConfigInfo()
            })
        }
    },
    onShareAppMessage() {
        return {
            title: this.configInfo.title,
            path: `/pages/index/index?share_v_id=${this.vid}&pageType=23&tid=${this.id}`
        }
    }
}
</script>

<style lang="scss" scoped>
.page {
    background-repeat: repeat-y;
    background-size: 100% auto;
    padding-bottom: calc(80rpx + constant(safe-area-inset-bottom));
    padding-bottom: calc(80rpx + env(safe-area-inset-bottom));
}
.back {
    width: 60rpx;
    height: 60rpx;
    border-radius: 50%;
    opacity: 0.6;
    position: fixed;
    left: 24rpx;
    z-index: 10;
}
.couItem {
    width: 660rpx;
    height: 205rpx;
    background-repeat: no-repeat;
    background-size: 100% auto;
    margin: 30rpx auto 0;
    .left {
        width: 240rpx;
        color: #FF5549;
    }
    .type {
        padding: 0 14rpx;
        height: 36rpx;
        border-radius: 18rpx;
        border: 1px solid #E74934;
        color: #E64933;
    }
}
.btn {
    min-width: 410rpx;
    width: fit-content;
    height: 88rpx;
    background: linear-gradient(to right, #FDF2D2, #FFD85C);
    border-radius: 44rpx;
    margin: 60rpx auto;
    padding: 0 20rpx;
    color: #CC0000;
}
</style>